<template>
<div class="user-model">
  <div v-show="isLogin" class="user-detail">
    <div @mouseover="isShowSecond" @mouseout="isShowSecond">
      <img src="~assets/img/common/baby.png" alt="">
      <div v-show="showSecond" class="user-Triangle"></div>
      <div v-show="showSecond" class="detail-second">
        <ul>
          <li>{{this.$store.getters.getNickName}}</li>
          <li>
            <span @click="toUser('/pscenter')">个人中心</span>
          </li>
          <li><el-button type="warning" @click="outLogin">退出登录</el-button></li>
        </ul>
      </div>
    </div>
  </div>
  <div v-show="!isLogin" class="to-login">
    <a href="javascript:void(0)" @click="toLogin">登录</a>
  </div>
</div>
</template>

<script>
import {request} from 'network/request'
export default{
  name: 'userdetail',
  data () {
    return {
      isLoginState: false,
      showSecond: false,
      path: '/user'
    }
  },
  methods: {
    toLogin() {
      this.$store.commit('showLoginBox')
    },
    isShowSecond() {
      this.showSecond = !this.showSecond
    },
    //退出系统的方法
    outLogin() {
      //请求后台登出操作
      request({
        url:'/blog/outLogin',
        method:'POST',
      }).then(response => {
        if(response.code === 20000){
          this.$store.commit('upUserState', null)
        }
      }).catch(error => {
        this.$message.error('退出登录失败')
      })
    },
    toUser(path) {
      if (this.$route.path != (this.path + path)) {
        this.$router.replace(this.path + path)
      }
    }
  },
  computed: {
    isLogin() {
      //从session里获取用户信息
      if (sessionStorage.getItem('userDetail')) {
        const userDetail = window.JSON.parse(sessionStorage.getItem('userDetail'))
        this.$store.commit('upUserState', {
          id: userDetail.id,
          nickName: userDetail.nickName,
          roles: userDetail.roles
        })
      } else {
        this.$store.commit('upUserState', null)
      }
      return this.$store.getters.getIsLogin
    }
  }
}
</script>

<style scoped>
.user-model{
  position: relative;
}
.to-login a{
  position: absolute;
  left: 250px;
  top: 15px;
  color: #ffffff;
}
.user-detail img{
  position: absolute;
  left: 250px;
  top: 1px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.user-detail span{
  cursor: pointer;
}
.detail-second{
  background-color: #ffffff;
  position: absolute;
  top: 52px;
  right: 50px;
  width: 200px;
  z-index: 9;
  text-align: center;
  border-radius: 5px;
}
.detail-second ul li{
  padding: 5px;
}
.detail-second ul li img{
  width: 16px;
  height: 16px;
}
.user-Triangle{
  background-color: rgba(0, 0, 0, 0);
  width: 200px;
  height: 20px;
  position: absolute;
  top: 40px;
  right: 50px;
}
.el-button{
  width: 95%;
  margin: 10px 0;
}
</style>
